<template>
  <div class="search-label mr10">
    <span v-if="showTitle" class="m-r-10">{{ title }}</span>
    <el-select
      v-model="status"
      @change="changeHandle"
      clearable
      collapse-tags
      :disabled="disabled"
      :multiple="multiple"
      size="small"
      placeholder="请选择"
      :style="{width:`${width}px`}">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>

import {getDictionary} from "@/api/system/dict";

export default {
  name: 'SearchOperateType',
  props: {
    title: {
      type: String,
      default: '操作'
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: [Number, String],
      default: undefined
    },
    width: {
      type: [Number, String],
      default: 180
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      status: undefined,
      options: [],
    }
  },
  watch: {
    defaultValue: {
      immediate: true,
      handler(newVal, oldVal) {
        this.status = newVal
      }
    }
  },
  created() {
    this.getDsDictList()
  },
  methods: {
    /**
     * 获取自定下拉配置项
     * */
    getDsDictList() {
      getDictionary({code: 'log_type'}).then(res => {
        this.options = res.data.data.map(item => ({id: item.dictKey, label: item.dictValue}))
      })
    },
    changeHandle(val) {
      let returnVal;
      if (this.multiple) {
        if (val && val.length > 0) {
          returnVal = val.join();
        } else {
          returnVal = undefined;
        }
      } else {
        if (val) {
          returnVal = val.toString();
        } else {
          returnVal = undefined;
        }
      }
      let names = []
      if (returnVal) {
        returnVal.split(',').forEach(item => {
          this.options.some(sys => {
            if (sys.id == item) {
              names.push(sys.userName)
              return true
            }
          })
        })
      }

      this.$emit('select', {ids: returnVal, names: names.toString()})
    }
    ,
    componentReset() {
      this.status = null;
      this.$emit('select', '')
    }
  }
}
</script>
<style scoped>
.search-label {
  white-space: nowrap;
}
</style>
